@import './src/assets/scss/index.scss';

.common-components-container{
    position: fixed;
    z-index: 200;
    right: 0;
}

.confirm-container{
    width: pxTorem(500px);
    font-size: pxTorem(24px);
    display: flex;
    flex-shrink: 0;
    flex-flow: column;
    max-width: 100%;
    max-height: 100%;
    position: relative;
    background-color: #eee;
    min-width: 450px;
    .fix-all{
        background: black;
        opacity: 0.4;
        position: fixed;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .kds-confirm-content{
        width: pxTorem(500px);
        background: #eee;
        color:$color-dark;
        min-width: pxTorem(450px);
        box-shadow: 3px 6px 12px black;
       .title{
            display: flex;
            justify-content: space-between;
            background-color: #444;
            color: #eee;
            flex-shrink: 0;
            align-items: center;
            flex: 1;
            min-height: 0;
            overflow: hidden;
            font-size: pxTorem(24px);
            .title-text{
                padding: pxTorem(20px) !important;
            }
            .close{
                cursor: pointer;
                padding: pxTorem(20px);
                display: flex;
                justify-content: center;
                align-items: center;
                .material-icons{
                    font-size: pxTorem(24px) !important;
                }
            }
        }
       .content{ 
           padding: pxTorem(20px);
           font-size: pxTorem(24px);
           min-height: pxTorem(240px);
           text-align: center;
           background-color: #eee;
           overflow-y: auto;
        }
       .confirm-footer{
            display: flex;
            font-size: pxTorem(42px);
            button{
                width: 100%;
                font-size: pxTorem(20px);
                padding: pxTorem(30px) pxTorem(30px);
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .fail{
                color: #555;
                background-color: #ddd;
            }
            .success{
                background: $primary;
                color: $color-white;
            } 
        }
   }
}

.growl-container{
    position: absolute;
    right: 0;
    top: 0;
    .item{
        box-sizing: content-box;
        display: flex;
        width: 400px;
        background: $warning;
        color: $color-white;
        padding: 10px 20px;
        margin: 10px;
        box-sizing: content-box;
        opacity: .8;
    }
    .info{
        background: $primary;
    }
    .error{
        background: $error;
    }
    .warn{
        background: $warning;
    }
    .success{
        background: $success;
    }
    .icon{float: right;}
}